<div class="layuimini-container layuimini-page-anim">
	<div class="layuimini-main">

		<fieldset class="table-search-fieldset">
			<legend>搜索信息</legend>
			<div style="margin: 10px 10px 10px 10px">
				<form class="layui-form layui-form-pane" onsubmit="return false">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">出发机场</label>
							<div class="layui-input-inline">
								<select name="start_terminal_id" id="start_terminal_id">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">终点机场</label>
							<div class="layui-input-inline">
								<select name="end_terminal_id" id="end_terminal_id">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">航班号</label>
							<div class="layui-input-inline">
								<input name="flight_no" id="flight_no" autoComplete="off" class="layui-input" />
							</div>
						</div>
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
						</div>
					</div>
				</form>
			</div>
		</fieldset>

		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
			</div>
		</script>

		<script type="text/html" id="itemContent">
			<div style="margin: 10px 10px;text-align: center;">
				<form class="layui-form layui-form-pane" lay-filter="data-form">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">当前状态</label>
							<div class="layui-input-inline">
								<select lay-verify="required" name="flight_id" id="flight_id">
									<option>请选择</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">当前状态</label>
							<div class="layui-input-inline">
								<select lay-verify="required" name="current_status" id="current_status">
									<option>请选择</option>
									<option value="计划">计划</option>
									<option value="取消">取消</option>
									<option value="完成">完成</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">登机口</label>
							<div class="layui-input-inline">
								<select lay-verify="required" name="boarding_gate" id="boarding_gate">
									<option>请选择</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">执行价格</label>
							<div class="layui-input-inline">
								<input type="number" lay-verify="required" id="execution_price" name="execution_price" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">预计起飞时间</label>
							<div class="layui-input-inline">
								<input type="text" lay-verify="required" id="estimated_takeoff_time" name="estimated_takeoff_time" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">预计到达时间</label>
							<div class="layui-input-inline">
								<input type="text" lay-verify="required" id="estimated_arrival_time" name="estimated_arrival_time" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">实际起飞时间</label>
							<div class="layui-input-inline">
								<input type="text" id="actual_takeoff_time" name="actual_takeoff_time" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">实际到达时间</label>
							<div class="layui-input-inline">
								<input type="text" id="actual_arrival_time" name="actual_arrival_time" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>

					<div class="layui-form-item" style="margin-top: 10px;">
						<div class="layui-inline">
							<a class="layui-btn layui-btn-primary" lay-submit lay-filter="data-ok-btn">确定 </a>
						</div>
					</div>
				</form>
			</div>
		</script>

		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

		<script type="text/html" id="currentTableBar">
			<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
		</script>

	</div>

</div>

<script>
	var toChildVal = {};

	layui.use(['form', 'table', 'element', 'miniPage', 'laydate'], function () {
		var $ = layui.jquery,
			form = layui.form,
			table = layui.table,
			miniPage = layui.miniPage,
			laydate = layui.laydate;

		var atMap;
		var fMap = null;
		$.ajax({
			url: "/api/AirportTerminal/maps",
			type: "GET",
			dataType: "json",
			async: false,
			success: function (res) {
				if (res.code == 0) {
					atMap = res.data;
					var selectEl1 = $('#start_terminal_id').empty().append(new Option("请选择", ""));
					$.each(atMap, function(k, v) {
						selectEl1.append(new Option(v, k));
					});
					var selectEl2 = $('#end_terminal_id').empty().append(new Option("请选择", ""));
					$.each(atMap, function(k, v) {
						selectEl2.append(new Option(v, k));
					});
					form.render("select");
				}
			},
		});

		table.render({
			elem: '#currentTableId',
			url: '/api/OnFlight',
			toolbar: '#toolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [[
				{field: 'id', title: 'ID', templet: function (item) {return item.id+' <span class="layui-badge layui-bg-green">机票类型</span>';},
					event: 'editTicketType', style:'cursor: pointer;'},
				{field: 'flight_no', title: '航班号', sort: true},
				{field: 'startName', title: '出发机场', templet: function (item) {return atMap[item.start_terminal_id];}},
				{field: 'endName', title: '终点机场', templet: function (item) {return atMap[item.end_terminal_id];}},
				{field: 'current_status', title: '状态'},
				{field: 'execution_price', title: '执行价格'},
				{field: 'estimated_takeoff_time', title: '预计起飞时间'},
				{field: 'estimated_arrival_time', title: '预计到达时间'},
				{field: 'actual_takeoff_time', title: '实际起飞时间'},
				{field: 'actual_arrival_time', title: '实际到达时间'},
				{field: 'boarding_gate', title: '登机口'},
				{title: '操作', toolbar: '#currentTableBar', align: "center"}
			]],
			limits: [10, 20, 50, 100],
			limit: 10,
			page: true,
			size: 'sm'
		});

		// 监听搜索操作
		form.on('submit(data-search-btn)', function (data) {
			console.log(data.field);
			table.reload('currentTableId', {where: data.field});//执行搜索重载
		});

		function editLayer(){
			var index = layer.open({
				title: '编辑',
				type: 1,
				shade: 0.2,
				maxmin: true,
				shadeClose: true,
				area: ['700px', '600px'],
				content: itemContent.innerHTML,
			});
			laydate.render({elem: '#estimated_takeoff_time',type: 'datetime'});
			laydate.render({elem: '#estimated_arrival_time',type: 'datetime'});
			laydate.render({elem: '#actual_takeoff_time',type: 'datetime'});
			laydate.render({elem: '#actual_arrival_time',type: 'datetime'});
			var selectEl1 = $('#flight_id').empty().append(new Option("请选择", ""));
			if(!fMap) {
				$.ajax({
					url: "/api/flightMap",
					type: "GET",
					dataType: "json",
					async: false,
					success: function (res) {
						if (res.code == 0) {
							fMap = res.data;
						}
					},
				});
			}
			$.each(fMap, function(k, v) {
				selectEl1.append(new Option(v[0]+' ['+atMap[v[1]]+'-'+atMap[v[2]]+']', k));
			});
			form.render("select");
		}

		// toolbar事件监听
		table.on('toolbar(currentTableFilter)', function (obj) {
			if (obj.event === 'add') {	// 监听添加操作
				// ** content
				editLayer();

				// 监听添加提交
				form.on("submit(data-ok-btn)", function (result) {
					$.ajax({
						url: "/api/OnFlight",
						data: result.field,
						type: "POST",
						dataType: "json",
						success: function (res) {
							layer.closeAll();
							if (res.code == 0) {
								layer.msg("添加成功", {icon: 1, time: 2000});
							} else {
								layer.msg(res.msg, {icon: 2, time: 2000});
							}
							table.reload('currentTableId');
						},
					});
				});
			}
		});

		//监听单元格工具
		table.on('tool(currentTableFilter)', function (obj) {
			var data = obj.data;
			if (obj.event === 'edit') {// 监听添加操作

				// ** content
				editLayer();
				form.val('data-form', data);

				// 监听修改提交
				form.on("submit(data-ok-btn)", function (result) {
					$.ajax({
						url: "/api/OnFlight/" + data.id,	// ** url
						data: result.field,
						type: "PUT",
						dataType: "json",
						success: function (res) {
							layer.closeAll();
							if (res.code == 0) {
								layer.msg('修改成功！');
							} else {
								layer.msg(res.msg);
							}
							table.reload('currentTableId');
						}
					});
				});

			} else if (obj.event === 'delete') {
				// 监听删除操作
				layer.confirm('确认是否删除？', function (index) {
					$.ajax({
						url: "/api/OnFlight/" + data.id,	// ** url
						type: "DELETE",
						dataType: "json",
						success: function (res) {
							if (res.code == 0) {
								obj.del();
								layer.msg('删除成功！');
							} else {
								layer.msg(res.msg);
							}
						}
					});

					layer.close(index);
				});
			} else if(obj.event === 'editTicketType'){
				toChildVal.ofid = data.id;
				var content = miniPage.getHrefContent('pages/tables/ticketType-manage.html');
				var openWH = miniPage.getOpenWidthHeight();

				var index = layer.open({
					title: '编辑',
					type: 1,
					shade: 0.2,
					maxmin:true,
					shadeClose: true,
					area: [openWH[0] + 'px', openWH[1] + 'px'],
					offset: [openWH[2] + 'px', openWH[3] + 'px'],
					content: content,
					cancel: function(index, layero){
						table.reload('currentTableId');
						layer.close(index);
						return false;
					}
				});
				$(window).on("resize", function () {
					layer.full(index);
				});
				return false;
			}

		});
	});
</script>
